/********预加载音频***********/
//创建加载对象
var queue = new createjs.LoadQueue();
//监听进度
queue.on('progress', function(e) {
	//加载进度百分比
	var p = e.progress * 100 + '%';
	var p = parseInt(p)
	$('.arrows span:last-child').text(p + '%');
	//	console.log($('.arrows span:last-child'))
	console.log("加载", p)
}, this)
//监听完成
queue.on('complete', function() {
	//隐藏预加载页
	$('#pagePreload').css({
		'display': 'none'
	})
	//显示playstar页
	$('.pagestar').css({
		'display': 'block'
	})
//	Queue2 ();  //第一批加载完成时加载第二批
}, this)
//先预加载十首音频资源列表
queue.loadManifest([{
		id: 'audio',
		src: "./music/yanyuan.mp3"
	},
	{
		id: 'audio',
		src: "./music/someOneLikeYou.mp3"
	},
	{
		id: 'audio',
		src: "./music/yong.mp3"
	},
	{
		id: 'audio',
		src: "./music/YoungAndBea.mp3"
	},
	{
		id: 'audio',
		src: "./music/jiangnan.mp3"
	},
	{
		id: 'audio',
		src: "./music/kebole.mp3"
	},
	{
		id: 'audio',
		src: "./music/animal.mp3"
	},
	{
		id: 'audio',
		src: "./music/taotai.mp3"
	},
	{
		id: 'audio',
		src: "./music/wonderful.mp3"
	},
	{
		id: 'audio',
		src: "./music/zouma.mp3"
	},

])

//预加载第二批音乐
//创建加载对象
// 	function Queue2 (){
var queue2 = new createjs.LoadQueue();
//监听进度
queue2.on('progress', function(e) {
 console.log("正在加载第二批音频")
}, this)
//监听完成
queue.on('complete', function() {
console.log("第二批加载完成")
}, this)
//先预加载十首音频资源列表
queue.loadManifest([{
		id: 'audio',
		src: "./music/anyong.mp3"
	},
	{
		id: 'audio',
		src: "./music/wonderful.mp3"
	},
	{
		id: 'audio',
		src: "./music/when_you.mp3"
	},
	{
		id: 'audio',
		src: "./music/Trust_you.mp3"
	},
	{
		id: 'audio',
		src: "./music/YoungAndBea.mp3"
	},
	{
		id: 'audio',
		src: "./music/duqin.mp3"
	},
	{
		id: 'audio',
		src: "./music/party_rock_anthem.mp3"
	},
	{
		id: 'audio',
		src: "./music/how_to_say.mp3"
	},
	{
		id: 'audio',
		src: "./music/I_have_never_been_to_me.mp3"
	},
	{
		id: 'audio',
		src: "./music/d_love.mp3"
	},
])
//}

var audio;
//playstar页的按钮监听事件
$('.pagestar').find('.star_btn').on('click', function() {
	Star_page();
})
//开始页
function Star_page() {
	var time = 60; //坑点不能写到setinterval的函数里面
	console.log("进入play页")
	//音频自动播放
	audio.play();

	$('.pagestar').css({
		'display': 'none'
	})
	$('.play_page').find('.animate1').css({
		'display': 'block'
	})

	//倒计时
	function Time(times) {

		time--;
		$('.itemBox>.mouthtime>.time').text(time + 'S')
		switch(time) {
			case 50:
				$('#levelBox').find('.animate1').css({
					'display': 'none'
				})
				$('#levelBox').find('.animate2').css({
					'display': 'block'
				})
				console.log(time)
				break;
			case 40:
				$('#levelBox').find('.animate2').css({
					'display': 'none'
				})
				$('#levelBox').find('.animate3').css({
					'display': 'block'
				})
				console.log(time)
				break;
			case 30:
				$('#levelBox').find('.animate3').css({
					'display': 'none'
				})
				$('#levelBox').find('.animate4').css({
					'display': 'block'
				})
				console.log(time)
				break;
			case 20:
				$('#levelBox').find('.animate4').css({
					'display': 'none'
				})
				$('#levelBox').find('.animate5').css({
					'display': 'block'
				})
				console.log(time)
				break;
			case 10:
				$('#levelBox').find('.animate5').css({
					'display': 'none'
				})
				$('#levelBox').find('.animate6').css({
					'display': 'block'
				})
				console.log(time)
				break;
			case 0:
				$('#levelBox').find('.animate6').css({
					'display': 'none'
				})
				$('.web>.paihan').css({
					'display': 'block'
				})
				$('.play_page>.itemBox').css({
					'display': 'none'
				})
				$('.seconde').css({'display':'none'})
				console.log(time)
				break;
		}
		if(time == 0) {
			console.log("定时器")
			clearInterval(T);
			audio.pause(); //倒计时为零时停掉音乐
		}
		console.log("T", T)
	}
	var T = setInterval(Time, 1000)
}

//play页面
//AJAX请求数据
var kugou_data = "./json/music.json"
//初始化页面
var num = 0;
$.ajax({
	type: "get",
	url: kugou_data,
	datatype: "json",
	success: function(res) {
		console.log(res)
		//打乱数据的函数
		function randonSort(a, b) {
			return Math.random() > .5 ? -1 : 1; //随机数大于0.5返回-1，反之返回1
		}
		var data = res.sort(randonSort);
		//把数据传出去
		resolve_data(data, num);
	},
	error: function(err) {
		console.warn(err)
	},
	complete(res) {}
});
//获取选择项的属性
var selectA = $('.selectA').attr('data-num')
console.log(selectA)
var selectB = $('.selectB').attr('data-num')
console.log(selectB)
var selectC = $('.selectC').attr('data-num')
console.log(selectC)

//开始开关状态
flag = true;
//猜中的歌数
var Song_num = 0;
//音频对象
audio = new Audio();
//初始化页面
function nextSong(data, num) {
	//音频的插入

	audio.src = data[num].audio;
	console.log(audio.src);
	audio.loop = "true" //循环播放
	//渲染页面
	$('.selectA').text(data[num].item[0]);
	$('.selectB').text(data[num].item[1]);
	$('.selectC').text(data[num].item[2]);
}

//限制两秒之后才能点
audio.addEventListener('timeupdate', function() {

	if(audio.currentTime >= 2) {
		flag = true;
		// 	  	console.log('bbb')
		$('.seconde').css({
			'z-index': -1
		})
	}
})

function resolve_data(data, num) {
	nextSong(data, num);
	//为选项绑定按钮
	$('.itemBox').on('click', '.selectA', function() {
		if(flag) {
			flag = false;
			//两秒之后才能点击
			if(data[num].answer == selectA) {
				Song_num++; //答对加一
				$('.jishou').text(Song_num)
				audio.pause(); //点击进来先停掉上一首歌
				num++; //在进入下一首歌
				nextSong(data, num);
				//音频自动播放
				audio.play();
				console.log("song_num", Song_num)
			} else {
				audio.pause(); //点击进来先停掉上一首歌
				num++; //在进入下一首歌
				nextSong(data, num);
				//音频自动播放
				audio.play();
			}

		} else {
			$('.seconde').css({
				'z-index': 99999,
				'display': 'block'
			})
		}

	})
	$('.itemBox').on('click', '.selectB', function() {
		if(flag) {
			flag = false;

			if(data[num].answer == selectB) {
				Song_num++; //答对加一
				$('.jishou').text(Song_num);
				audio.pause();
				num++;
				nextSong(data, num);
				//音频自动播放
				audio.play();
				console.log("song_num", Song_num)
			} else {
				audio.pause();
				num++;
				nextSong(data, num);
				//音频自动播放
				audio.play();
			}
		} else {
			$('.seconde').css({
				'z-index': 99999,
				'display': 'block'
			})
		}
	})
	$('.itemBox').on('click', '.selectC', function() {
		if(flag) {
			flag = false;

			if(data[num].answer == selectC) {
				Song_num++; //答对加一
				$('.jishou').text(Song_num);
				audio.pause();
				num++;
				nextSong(data, num);
				//音频自动播放
				audio.play();
				console.log("song_num", Song_num);
			} else {
				audio.pause();
				num++;
				nextSong(data, num);
				//音频自动播放
				audio.play();
			}
		} else {
			$('.seconde').css({
				'z-index': 99999,
				'display': 'block'
			})
		}
	})
}
//排行榜页
$('.web>.paihan').on('click', '.changeagain', function() { //注意由于层级关系，必须改样式的z-index，用其他会造成点击不到目标 
	$('.web>.paihan').css({
		'display': 'none'
	})
	$('.play_page>.itemBox').css({
		'display': 'block'
	})
	$('.pagestar').css({
		'display': 'block'
	})
	Song_num = 0;
})
//分享按钮

 	$('.web>.paihan').on('click','.share',function(){
 		$('.web>.paihan').css({
					'display': 'none'
				})
 		$('.sharfriend').css({'display':'block'})
 	})
/*   
  
 *   总结：1、注意渲染功能和事件点击功能分开写，否则多次调用会出现绑定多个事件 ，原因是多次调用了渲染函数进而又绑定了一次
 *       
 *       2、注意当有多个定时器要放一起，要不然可能造成互相影响
 *   
 *   
 *  
 * 
 * */